<template>
  <div class="video-container">
    <el-button
        class="back-btn"
        type="info"
        icon="el-icon-arrow-left"
        @click="goBack"
    >
      返回
    </el-button>
    <!-- 主容器 -->
    <el-container>
      <!-- 主要内容区域 -->
      <el-main>
        <!-- 视频播放器 -->
        <div class="video-player">
          <video
              ref="videoPlayer"
              class="video-js"
              controls
              :poster="videoInfo.poster"
              preload="auto"
              :src="currentVideoUrl"
              style="width: 100%; height: 100%"
          >
          </video>
        </div>

        <!-- 视频信息 -->
        <div class="video-info">
          <h2>{{ videoInfo.title }}</h2>
          <div class="meta-info">
            <span>播放量：{{ videoInfo.views }}</span>
            <el-divider direction="vertical"></el-divider>
            <span>点赞数：{{ videoInfo.likes }}</span>
            <el-divider direction="vertical"></el-divider>
            <span>发布时间：{{ videoInfo.publishTime }}</span>
          </div>
          <p class="description">{{ videoInfo.description }}</p>
        </div>
      </el-main>

      <!-- 侧边栏 -->
      <el-aside width="350px">
        <!-- 选集列表 -->
        <div class="episode-list">
          <h3>选集列表</h3>
          <el-scrollbar style="height: 600px">
            <div
                v-for="(item, index) in episodeList"
                :key="index"
                class="episode-item"
                :class="{ active: currentEpisode === index }"
                @click="changeEpisode(index)"
            >
              第{{ index + 1 }}集
            </div>
          </el-scrollbar>
        </div>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
export default {
  props: ['id'], // 接收路由参数
  data() {
    return {
      currentEpisode: 0,
      videoInfo: {
        title: this.$route.query.title || "默认标题",
        views: 123456,
        likes: 9876,
        publishTime: "2023-08-15",
        description: "这里是视频的详细描述信息...",
        poster: this.$route.query.cover || "https://via.placeholder.com/800x450"
      },
      // 其他数据...
    };
  },
  methods: {
    playVideo(video) {
      // 直接跳转，不需要登录验证
      this.$router.push({
        path: `/video/${video.id}`,
        query: {
          title: video.title,
          cover: video.cover
        }
      })
    },
    goBack() {
      if (window.history.length > 1) {
        this.$router.go(-1) // 正常返回
      } else {
        this.$router.push('/') // 直接访问时跳转首页
      }
    }
  }
}
</script>

<style scoped>
.video-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.video-player {
  position: relative;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  background: #000;
}

.video-player video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-info {
  margin-top: 20px;
}

.meta-info {
  color: #999;
  margin: 10px 0;
}

.description {
  color: #666;
  line-height: 1.6;
}

.episode-list {
  padding: 15px;
  background: #f5f7fa;
  border-radius: 4px;
}

.episode-item {
  padding: 12px;
  margin: 8px 0;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.episode-item:hover {
  background: #ecf5ff;
  color: #409eff;
}

.episode-item.active {
  background: #409eff;
  color: white;
}
.back-btn {
  position: fixed;
  left: 20px;
  top: 20px;
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  transition: all 0.3s;
}

.back-btn:hover {
  transform: translateX(-3px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
</style>